作業ログ | アナログ時計を表示するUserScript

2021-09-14

17:44:23 とりあえず表示してみる

code:js

const clock = document.createElement("analog-clock");

clock.dark = true;

clock.offset = 9;

clock.style.position = "absolute";

clock.style.top = "20vh";

clock.style.left = "10vw";

clock.style.width = "20rem";

clock.style.height = "20rem";

document.body.append(clock);

17:51:37 こうなる

https://gyazo.com/f9e9194c248f095599afee5a59697d55

17:52:56 どこに置こうか

新規作成ボタンの隣

code:js

const clock = document.createElement("analog-clock");

clock.dark = true;

clock.style.width = "34px";

clock.style.height = "34px";

document.querySelector("div.navbar-form").insertAdjacentElement("afterbegin", clock);

const clock2 = clock.cloneNode();

clock2.dark = true;

clock2.style.margin = "auto";

document.querySelector("div.quick-launch.layout-page").append(clock2);

そこまで見た目は悪くない

https://gyazo.com/e3fa37b605d2bb27e9252780f80de10c

若干時計の下部がはみ出てしまうが……

画面が小さいと隠れてしまう

18:19:25 画面が小さいときでも見えるようにした

が、微妙すぎる……

時計が小さすぎて見にくい

PageMenu

押すと拡大するとか

code:js

const id = "Analog Clock";

scrapbox.PageMenu.addMenu({

title: id,

});

const clock = document.createElement("analog-clock");

clock.dark = true;

clock.offset = 9;

clock.style.position = "absolute";

clock.style.width = "34px";

clock.style.height = "34px";

document.getElementById(id).append(clock);

見た目は問題ないが、Reactに再描画されて消えてしまうのが欠点

右下に大きく表示

code:js

const clock = document.createElement("analog-clock");

clock.dark = true;

clock.offset = 9;

clock.style.position = "fixed";

clock.style.right = "10px";

clock.style.bottom = "10px";

clock.style.width = "20rem";

clock.style.height = "20rem";

document.body.append(clock);

https://gyazo.com/a2fac45722230faeed3a301c85b849f8

一番見やすいのはこれかなあ

ただ、右下だから視線が行きにくい

スマホだと邪魔くさい

https://gyazo.com/4ac43952794e34a5abcd820a25753907

まあPCでしか使わない予定なので、スマホで見にくくても構わないのだが

右上に大きく表示

code:js

const clock = document.createElement("analog-clock");

clock.dark = true;

clock.offset = 9;

clock.style.position = "fixed";

clock.style.right = "80px";

clock.style.top = "45px";

clock.style.width = "20rem";

clock.style.height = "20rem";

document.body.append(clock);

一番見やすいかな？

https://gyazo.com/a813def9b952d1359b2b6fea495e1a03

18:37:26 あとはPageMenuを使って表示非表示を切り替えられるようにすればよさそう

18:43:40 出来た